<template>
  <div class="item-panel">
    <div class="item-panel-search">
      <el-input placeholder="请输入组件名称或描述" v-model="searchKeyword">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>

    <el-tree
      class="item-panel-tree"
      :data="data"
      node-key="id"
      :filter-node-method="filterNode"
      ref="tree"
    >
      <div class="tree-node-wrapper" slot-scope="{ data }">
        <div class="tree-node-parent" v-if="data.children">{{ data.name }}</div>
        <div
          class="tree-node-leaf"
          v-else
          draggable
          @dragstart="handleDragStart(data, $event)"
          @mouseenter="handleMouseEnter({ item: data })"
          @mouseleave="handleMouseLeave"
        >
          {{ data.name }}
        </div>
      </div>
    </el-tree>
  </div>
</template>

<script>
import items from "./items";
import generateNode from "../../core/graph/nodes/generateNode";
import EventBus from "../../event-bus";
import BusEvents from "../../event-bus/event-types";

export default {
  name: "item-panel",
  data() {
    return {
      searchKeyword: "",
      data: items,
      hoverNode: {},
    };
  },
  watch: {
    // 监听searchKeyword变化，同步更新tree
    searchKeyword(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    // 搜索过滤方法
    filterNode(val, data) {
      if (!val) return true;
      return data.name.toLowerCase().indexOf(val.toLowerCase()) !== -1;
    },
    handleDragStart(nodeData, e) {
      // console.log(nodeData, e);
      // EventBus.$emit(BusEvents.INTERACT_ITEM_DRAG, { nodeData, e });
      let graphNode = generateNode(nodeData);
      EventBus.$emit(BusEvents.INTERACT_ITEM_DRAG, { node: graphNode, e: e });
    },
    handleMouseEnter(payload) {
      EventBus.$emit(BusEvents.INTERACT_MOUSE_ENTER, payload);
    },
    handleMouseLeave() {
      EventBus.$emit(BusEvents.INTERACT_MOUSE_LEAVE);
    },
  },
};
</script>

<style lang="less">
.item-panel {
  width: 280px;
  height: 100%;
  border-right: 1px solid rgba(0, 0, 0, 0.08);

  display: flex;
  flex-direction: column;

  .item-panel-search {
    box-sizing: border-box;
    height: 40px;
    padding: 6px 8px;

    .el-input__inner {
      height: 28px;
      font-size: 12px;
    }
  }

  .item-panel-tree {
    width: auto;
    flex-grow: 1;
    // background-image: linear-gradient(#fff 50%, #f7f9fb 0);
    background-size: 100% 60px;
    cursor: pointer;
    overflow-y: hidden;
    user-select: none;
    &:hover {
      overflow-y: scroll;
    }

    .tree-node-wrapper {
      width: 100%;
      height: 100%;
      line-height: 30px;
    }

    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: rgba(0, 0, 0, 0.2);
    }
  }
}

// 通过渗透的方式，直接修改 .el-tree-node__content 的高度
.el-tree.item-panel-tree .el-tree-node__content {
  height: 30px;
  &:hover {
    background-color: #f5f5f5;
  }
}
// 不旋转
.item-panel .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.item-panel .el-tree-node__expand-icon.el-icon-caret-right::before {
  content: "\e78a";
  font-size: 14px;
}
.item-panel .el-tree-node__expand-icon.el-icon-caret-right.expanded::before {
  content: "\e784";
  font-size: 14px;
}
.item-panel .el-tree-node__expand-icon.el-icon-caret-right.is-leaf:before {
  content: "\e785";
  font-size: 14px;
  color: #c0c4cc;
}
</style>
